<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>后厨订单页面</title>
    <link rel="icon" href="__STATIC__/img/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="__STATIC__/img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/layer-v3.1.1/layer/theme/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/index.css"/>
</head>

<body>
<div class="orderCent">
    <div class="orderCent-top">
        <div class="centTitle">后厨订单页面</div>
        <div class="headright">
            <div class="shopNmae">{$admin.shop_name}</div>
            <input type="hidden" name="shop_id" value="{$admin.id}">
            <div class="signOut">
                <img src="__STATIC__/img/img5.png" alt="..."/>
                <div>退出账号</div>
            </div>
        </div>
    </div>
    <div class="orderCent-cent">
        <div class="redCol">推送</div>
        <div class="hangAir">未完成</div>
        <div class="completed">已完成</div>
    </div>
    <div class="hiddenDiv"></div>
    <div class="orderCent-bot">
        <div class="orderCentMenu-top">
            <div>
                <div>桌号</div>
                <div>菜名</div>
                <div>规格</div>
                <div>数量(份)</div>
                <div>下单时间</div>
                <div>厨师姓名</div>
                <div>操作</div>
            </div>
        </div>
        <div class="orderCentMenu-bot"></div>
        <div class="orderCentMenuPush"></div>
    </div>
</div>
<div class="selec hide"></div>
<div class="selec2 hide"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="__STATIC__/layer-v3.1.1/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        //orderCent-bot动态设置高度
        var heg = $(window).height();
        var heg2 = heg - 190 - 50;
        $(".orderCent-bot").height(heg2);
        //退出
        $(".signOut").click(function () {
            layer.open({
                title: '系统提示！',
                content: '您确定要退出?',
                btn: ['取消', '确定'],
                yes: function (index, layero) {
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                    // 退出ajax
                    loginOut();
                },
                cancel: function () {
                    console.log("点击了右上角xx");
                }
            });
        });
        // 退出ajax
        function loginOut() {
            $.ajax({
                url: '{:url("index/loginOut")}',
                cache: false,
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        window.location.href = '{:url("index/index")}';
                    } else {
                        alert(data.msg);
                    }
                },
                error: function () {
                    layer.msg('退出接口异常！');
                }
            });
        }
        //				标签切换
        $(".orderCent-cent>div").click(function () {
            $(this).addClass("redCol").siblings().removeClass("redCol");
        });
        //页面加载进来web socket请求数据
        var shop_id = $('input[name="shop_id"]').val();
        var ws = new WebSocket("wss://bjlht.taiyannet.com/wss:2346");
        ws.onopen = function () {
            // Web Socket 已连接上，使用 send() 方法发送数据
            ws.send(shop_id);
        };
        ws.onmessage = function (evt) {
            var received_msg = evt.data;
            $.ajax({
                url: '{:url("push/pushData")}',
                cache: false,
                type: 'post',
                data: {
                    order_no: received_msg
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        for (var m = 0; m <  data.cook.length; m++) {
                            var selectxt = '<option value="' + data.cook[m].id + '">' + data.cook[m].true_name + '</option>';
                            $(".selec2").append(selectxt);
                        }
                        for (var k = 0; k < data.data.length; k++) {
                            var table = data.data[k].table;
                            var content = data.data[k].content;
                            var cook_id = data.data[k].food.cook_id;
                            var food_name = data.data[k].food.food_name;
                            // var order_no = data.data[k].food.order_no;
                            var quantity = data.data[k].food.quantity;
                            var cook_time = data.data[k].create_time;
                            var selec=$(".selec2").html();
                            var spec=data.data[k].food.spec;
                            var strTxt = '<div><div class="fondCent-top"> <div> <div class="foodNum">'
                                + table + '</div></div> <div class="orderName">'
                                + food_name + '</div> <div class="orderguige">'
                                + spec + '</div> <div class="orderNum">'
                                + quantity + '</div> <div class="orderTime">'
                                + cook_time + '</div> <div class="cook"> <select>'+ selec +'</select> </div> <div class="sureClick"><input type="hidden" value="' + cook_id + '">确定</div> </div> <div class="fondCent-bot">备注:' + content + ' </div> </div>';
                            $(".orderCentMenuPush").append(strTxt);

                        }
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.msg('请求未完成数据接口异常！');
                }
            });
        };
        ws.onclose = function () {
            // 关闭 websocket
        };
// 推送
        $(".redCol").click(function () {
            $(".orderCentMenuPush").show();
            $(".orderCentMenu-bot").hide();
        });
// 未完成
        $(".hangAir").click(function () {
            $(".orderCentMenuPush").hide();
            $(".orderCentMenu-bot").show();
            $(".orderCentMenu-bot").children().remove();
            $.ajax({
                url: '{:url("push/pushAll")}',
                cache: false,
                type: 'post',
                data: {
                    status: 0
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        for (var m = 0; m <  data.cook.length; m++) {
                            var selectxt = '<option value="' + data.cook[m].id + '">' + data.cook[m].true_name + '</option>';
                           $(".selec").append(selectxt);
                        }
                        for (var k = 0; k < data.data.length; k++) {
                            var table = data.data[k].table;
                            var content = data.data[k].content;
                            var cook_id = data.data[k].food.cook_id;
                            var food_name = data.data[k].food.food_name;
                            var quantity = data.data[k].food.quantity;
                            var cook_time = data.data[k].create_time;
                            var spec=data.data[k].food.spec;
                            var selec=$(".selec").html();
                            var strTxt = '<div><div class="fondCent-top"> <div> <div class="foodNum">'
                                + table + '</div></div> <div class="orderName">'
                                + food_name + '</div> <div class="orderguige">'
                                + spec + '</div> <div class="orderNum">'
                                + quantity + '</div> <div class="orderTime">'
                                + cook_time + '</div> <div class="cook"> <select>'+ selec +'</select> </div> <div class="sureClick"><input type="hidden" value="' + cook_id + '">确定</div> </div> <div class="fondCent-bot">备注:' + content + ' </div> </div>';
                            $(".orderCentMenu-bot").append(strTxt);
                        }
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.msg('请求未完成数据接口异常！');
                }
            });
        });
// 已完成
        $(".completed").click(function () {
            $(".orderCentMenuPush").hide();
            $(".orderCentMenu-bot").show();
            $(".orderCentMenu-bot").children().remove();
            $.ajax({
                url: '{:url("push/pushAll")}',
                cache: false,
                type: 'post',
                data: {
                    status: 1
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        for (var k = 0; k < data.data.length; k++) {
                            var table = data.data[k].table;
                            var cook = data.data[k].cook;
                            var content = data.data[k].content;
                            var cook_id = data.data[k].food.cook_id;
                            var food_name = data.data[k].food.food_name;
                            var quantity = data.data[k].food.quantity;
                            var cook_time = '2018-12-30 18:00';
                            var spec=data.data[k].food.spec;
                            var strTxt = '<div><div class="fondCent-top"> <div> <div class="foodNum">'
                                + table + '</div></div> <div class="orderName">'
                                + food_name + '</div> <div class="orderguige">'
                                + spec + '</div> <div class="orderNum">'
                                + quantity + '</div> <div class="orderTime">'
                                + cook_time + '</div> <div class="cook">' + cook + '</div> <div class="sureClick"><input type="hidden" value="' + cook_id + '">确定</div> </div> <div class="fondCent-bot">备注:' + content + ' </div> </div>';
                            $(".orderCentMenu-bot").append(strTxt);
                        }
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.msg('请求未完成数据接口异常！');
                }
            });
        });

    });
</script>
</body>

</html>